<template>
	<view>
		<uni-nav-bar @clickLeft="onBack" left-icon="back" statusBar :border="false">
			<view class="flex justify-center align-center w-100">
				所有人可见<view class="iconfont icon-shezhi ml-1"></view>
			</view>
		</uni-nav-bar>
		<!-- textarea多行文本输入 -->
		<textarea v-model="content"  placeholder="请输入内容" class="w-100 px-2 " />

		<!-- 多图上传 -->
		<upload-image ref="refImg" :show="show" :list="imgList" @change="changeImg"></upload-image>

		<!-- 底部按钮 -->
		<view class="fixed-bottom bg-white p-2" style="95rpx">
			<view class="flex justify-between align-center text-light-blue">
				<view class="flex justify-between align-center">
					<view class="iconfont icon-caidan btn-w font-lg animate__animated" hover-class="animate__shakeY">
					</view>
					<view class="iconfont icon-huatifuhao btn-w font-lg animate__animated"
						hover-class="animate__shakeY"></view>
					<view @click="clickImg('refImg')" class="iconfont icon-tupian btn-w font-lg animate__animated" hover-class="animate__shakeY">
					</view>
				</view>
				<view class="flex align-center justify-center bg-main text-white rounded animate__animated"
					style="width: 140rpx;height: 62rpx;" hover-class="animate__shakeY">
					发送
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni-ui/uni-nav-bar/uni-nav-bar.vue'
	import uploadImage from "@/components/common/upload-image.vue"
	export default {
		components: {
			uniNavBar,
			uploadImage
		},
		data() {
			return {
				content: '',
				imgList: [],
			}
		},
		computed: {
			show() {
				return this.imgList.length > 0 
			}
		},
		//页面加载时
		onLoad() {
			//拿到存储数据
			let result =  uni.getStorageSync('add-input')
			if(!result) return
			this.content = result.content
			this.imgList = result.imgList
		},
		methods: {
			//点击图标事件
			clickImg(e){
				//switch基于不同的条件执行不同的动作
				switch(e){
					case 'refImg':
					//ref用来引用注册子组件或者元素
					//this.$ref.refName获取DOM或子组件
					this.$refs.refImg.chooseImage()
						break;
				}
			},
			//保存操作
			store(){
				let obj = {
					content:this.content,
					imgList:this.imgList
				}
				//保存为本地存储
				uni.setStorageSync('add-input',obj)
			},
			// 监听返回按钮
			onBack() {
				//如果内容为空或者图片长度大于0并且没有弹出提示框
				if (this.content !== '' || this.imgList.length > 0) {
					uni.showModal({
						content: '是否保存草稿?',
						confirmText: '保存',
						cancelText: '不保存',
						success: (res) => {
							// 保存数据
							if (res.confirm) this.store()
							//清除缓存
							else uni.removeStorageSync('add-input')
							//手动执行返回
							this.$back()
						},
					});
				}
				else this.$back()
			},

			//选中图片
			changeImg(e) {
				this.imgList = e
				// console.log(e);
			}
		}
	}
</script>

<style>
	.btn-w {
		width: 70rpx;
	}


</style>
